<!DOCTYPE html>
<html lang="en" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>FAQs | flipped</title>
<meta name="keywords" content="PaperMod" />
<meta name="description" content="Frequently Asked Questions">
<meta name="author" content="Aditya Telange">
<link rel="canonical" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-faq/" />
<link crossorigin="anonymous" href="/flippedzh/assets/css/stylesheet.min.2d6dbfc6e0f8a1db1c9d082a76dc11d094328cf63f247bbc2421dfaa7f2bb170.css" integrity="sha256-LW2/xuD4odscnQgqdtwR0JQyjPY/JHu8JCHfqn8rsXA=" rel="preload stylesheet" as="style">
<script defer crossorigin="anonymous" src="/flippedzh/assets/js/highlight.min.7680afc38aa6b15ddf158a4f3780b7b1f7dde7e91d26f073e6229bb7a0793c92.js" integrity="sha256-doCvw4qmsV3fFYpPN4C3sffd5&#43;kdJvBz5iKbt6B5PJI="
    onload="hljs.initHighlightingOnLoad();"></script>
<link rel="icon" href="http://zouheng22.gitee.io/flippedzh/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://zouheng22.gitee.io/flippedzh/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://zouheng22.gitee.io/flippedzh/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://zouheng22.gitee.io/flippedzh/apple-touch-icon.png">
<link rel="mask-icon" href="http://zouheng22.gitee.io/flippedzh/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<meta name="generator" content="Hugo 0.83.1" />
<link rel="alternate" hreflang="en" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-faq/" />
<meta property="og:title" content="FAQs" />
<meta property="og:description" content="Frequently Asked Questions" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-faq/" /><meta property="og:image" content="http://zouheng22.gitee.io/flippedzh/papermod-cover.png"/><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-01-20T00:00:00&#43;00:00" />
<meta property="article:modified_time" content="2021-01-20T00:00:00&#43;00:00" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://zouheng22.gitee.io/flippedzh/papermod-cover.png"/>

<meta name="twitter:title" content="FAQs"/>
<meta name="twitter:description" content="Frequently Asked Questions"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Posts",
      "item": "http://zouheng22.gitee.io/flippedzh/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "PaperMod",
      "item": "http://zouheng22.gitee.io/flippedzh/posts/papermod/"
    }, 
    {
      "@type": "ListItem",
      "position":  4 ,
      "name": "FAQs",
      "item": "http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-faq/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "FAQs",
  "name": "FAQs",
  "description": "Frequently Asked Questions",
  "keywords": [
    "PaperMod"
  ],
  "articleBody": "Intro   We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\n  You can find any YML to TOML converters if necessary.\n   Override theme template By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.\nLet’s say you wish the list was different. All you have to do is copy the list template:\nyour-site/themes/papermod/layouts/_defaults/list.html And paste it under your own layouts folder:\nyour-site/layouts/_defaults/list.html Then you’re free to make any changes you want to the list. When Hugo builds your site, your copy of list.html will be used instead of the theme’s list.html.\n Enable Social-Metadata and SEO These include OpenGraph, Twitter Cards and Schema.\nparams: env: production or set HUGO_ENV as “production” in system env-vars\n Failed to find a valid digest in the ‘integrity’ attribute for resource … ? Read about How Subresource Integrity helps: Subresource_Integrity\nWhy was the asset not loading ? : How_browsers_handle_Subresource_Integrity\nSolution:\nSet the following in config.yml\nparams: assets: disableFingerprinting: true Linked Issues:\n https://stackoverflow.com/questions/65056585/hugo-theme-not-loading https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/   Bundling Custom css with theme’s assets  For adding custom css to be bundled inside one minimized css  Create folder in yout project directory as\n.(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── assets/ └── css/ └── extended/ All css files inside assets/css/extended will be bundled !\nNote: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under assets/css/extended\nLinked Issues:\n Papermod Theme: How to add custom CSS?   Custom Head / Footer Custom css/js can be added by way mentioned below.\n.(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── layouts ├── partials │ ├── comments.html │ ├── extend_footer.html Create a html page in directory structure as shown above.\nContents of extend_head.html will be added to head of page.\nand contents of extend_footer.html will be added to bottom of page.\n Add menu to site You can add menu entries which will appear in the header of every page.\nTo do so, add a menu section to your site’s config.yml:\nmenu: main: - identifier: categories name: categories url: /categories/ weight: 10 - identifier: tags name: tags url: /tags/ weight: 20 - identifier: example name: example.org url: https://example.org weight: 30 name controls what will be displayed for the menu entry. url sets the URL that the entry points to. weight is used to control the positioning of entries.\nFor more information on menus, see the Hugo wiki page.\n Pin a Post Post can be pinned/ displayed top on the list by adding a weight= var to page-variables\nexample:\n--- title: \"My Important post\" date: 2020-09-15T11:30:03+00:00 weight: 1 --- --- title: \"My 2nd Important post\" date: 2020-09-15T11:30:03+00:00 weight: 2 ---  Adding Custom Favicon(s) We support the following paths under /static directory and can be added accordingly.\n favicon.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png safari-pinned-tab.svg    Favicon(s) can be generated by Favicon.io\nand can be simply put in /static folder.\n  Other way is to add favicon(s) NOT located in /static folder.\nIn site config add the following:\nparams: assets: favicon: \"\" favicon16x16: \"\" favicon32x32: \"\" apple_touch_icon: \"\" safari_pinned_tab: \"\"  absolute url means direct links to external resource: ex. https://web.site/someimage.png  example:\nparams: assets: favicon: \"/favicon.ico\" favicon16x16: \"/favicon-16x16.png\" favicon32x32: \"/favicon-32x32.png\" apple_touch_icon: \"/apple-touch-icon.png\" safari_pinned_tab: \"/safari-pinned-tab.svg\"    Centering image in markdown Add #center after image to center align an image\n![name](path/to/image.png#center) When using figure shortcode\nuse align=center to center image with captions\nex.\n{{figure align=center src=\"image.jpg\" }}  Using Hugo’s Syntax highlighter “chroma”   Disable Highlight.js in site config.yml\nparams: assets: disableHLJS: true   Set hugo’s markdown styling in site config.yml\nmarkup: highlight: # anchorLineNos: true codeFences: true guessSyntax: true lineNos: true # noClasses: false style: monokai   If you want lineNos: true, the background won’t be proper. This will only work with noClasses: false or pygmentsUseClasses: true. Read Generate Syntax Highlighter CSS\nAdd the following to assets/css/extended/custom.css\n.chroma { background-color: unset; } More Info : Configure Markup - Highlight\n   Search not working ? If you are using a CDN to server assets from a different domain, search would break\nWhy? Take a look at fastsearch.js#L35.\nWe fetch the index.json (where the search function looks for the keywords typed) one level up of the website search.min.js is hosted on.\nWe have used this insted of assigning baseURL so as to work with multilingual websites ex. example.com/fr/ and websites being placed under a subdirectory ex. example.com/blog/.\nTo fix for single language websites hosting assets from CDN, this you may override fastsearch.js#L35 and placing appropriate URL as in\nxhr.open(\"GET\", \"https://example.com/index.json\");  References  Override a Hugo theme  ",
  "wordCount" : "785",
  "inLanguage": "en",
  "datePublished": "2021-01-20T00:00:00Z",
  "dateModified": "2021-01-20T00:00:00Z",
  "author":{
    "@type": "Person",
    "name": "Aditya Telange"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-faq/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "flipped",
    "logo": {
      "@type": "ImageObject",
      "url": "http://zouheng22.gitee.io/flippedzh/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>
<noscript>
    <style type="text/css">
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: #1d1e20;
                --entry: #2e2e33;
                --primary: rgba(255, 255, 255, 0.84);
                --secondary: rgba(255, 255, 255, 0.56);
                --tertiary: rgba(255, 255, 255, 0.16);
                --content: rgba(255, 255, 255, 0.74);
                --hljs-bg: #2e2e33;
                --code-bg: #37383e;
                --border: #333;
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://zouheng22.gitee.io/flippedzh" accesskey="h" title="flipped (Alt + H)">flipped</a>
            <span class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                
            </span>
        </div>
        <ul id="menu">
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/archives/" title="文章">
                    <span>文章</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/categories" title="目录">
                    <span>目录</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/tags" title="标签">
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/series" title="系列">
                    <span>系列</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/search/" title="搜索">
                    <span>搜索</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/fr" title="关于我">
                    <span>关于我</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="http://zouheng22.gitee.io/flippedzh">Home</a>&nbsp;»&nbsp;<a href="http://zouheng22.gitee.io/flippedzh/posts/">Posts</a>&nbsp;»&nbsp;<a href="http://zouheng22.gitee.io/flippedzh/posts/papermod/">PaperMod</a></div>
    <h1 class="post-title">
      FAQs<div class="entry-isdraft"><sup>&nbsp;&nbsp;[draft]</sup></div>
    </h1>
    <div class="post-meta">January 20, 2021&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Aditya Telange
</div>
  </header> <div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <div class="details">Table of Contents</div>
        </summary>
        <div class="inner"><ul>
                <li>
                    <a href="#intro" aria-label="Intro">Intro</a></li>
                <li>
                    <a href="#override-theme-template" aria-label="Override theme template">Override theme template</a></li>
                <li>
                    <a href="#enable-social-metadata-and-seo" aria-label="Enable Social-Metadata and SEO">Enable Social-Metadata and SEO</a></li>
                <li>
                    <a href="#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--" aria-label="Failed to find a valid digest in the &amp;lsquo;integrity&amp;rsquo; attribute for resource &amp;hellip; ?">Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?</a></li>
                <li>
                    <a href="#bundling-custom-css-with-themes-assets" aria-label="Bundling Custom css with theme&amp;rsquo;s assets">Bundling Custom css with theme&rsquo;s assets</a></li>
                <li>
                    <a href="#custom-head--footer" aria-label="Custom Head / Footer">Custom Head / Footer</a></li>
                <li>
                    <a href="#add-menu-to-site" aria-label="Add menu to site">Add menu to site</a></li>
                <li>
                    <a href="#pin-a-post" aria-label="Pin a Post">Pin a Post</a></li>
                <li>
                    <a href="#adding-custom-favicons" aria-label="Adding Custom Favicon(s)">Adding Custom Favicon(s)</a></li>
                <li>
                    <a href="#centering-image-in-markdown" aria-label="Centering image in markdown">Centering image in markdown</a></li>
                <li>
                    <a href="#using-hugos-syntax-highlighter-chroma" aria-label="Using Hugo&amp;rsquo;s Syntax highlighter &amp;ldquo;chroma&amp;rdquo;">Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;</a></li>
                <li>
                    <a href="#search-not-working-" aria-label="Search not working ?">Search not working ?</a></li>
                <li>
                    <a href="#references" aria-label="References">References</a>
                </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><h2 id="intro">Intro<a hidden class="anchor" aria-hidden="true" href="#intro">#</a></h2>
<ul>
<li>
<p><strong>We&rsquo;ll be using <code>yml/yaml</code> format for all examples down below, I recommend using <code>yml</code> over <code>toml</code> as it is easier to read.</strong></p>
</li>
<li>
<p>You can find any <a href="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p>
</li>
</ul>
<hr>
<h2 id="override-theme-template">Override theme template<a hidden class="anchor" aria-hidden="true" href="#override-theme-template">#</a></h2>
<p>By Hugo&rsquo;s Lookup Order, you can override any part of a theme that you want. The following is a quick example.</p>
<p>Let&rsquo;s say you wish the <code>list</code> was different. All you have to do is copy the <code>list</code> template:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">your-site/themes/papermod/layouts/_defaults/list.html
</code></pre></div><p>And paste it under your own <code>layouts</code> folder:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">your-site/layouts/_defaults/list.html
</code></pre></div><p>Then you&rsquo;re free to make any changes you want to the <code>list</code>.
When Hugo builds your site, your copy of <code>list.html</code> will be used instead of the theme&rsquo;s <code>list.html</code>.</p>
<hr>
<h2 id="enable-social-metadata-and-seo">Enable Social-Metadata and SEO<a hidden class="anchor" aria-hidden="true" href="#enable-social-metadata-and-seo">#</a></h2>
<p>These include OpenGraph, Twitter Cards and Schema.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">env</span>: <span style="color:#ae81ff">production</span>
</code></pre></div><p>or set <code>HUGO_ENV</code> as &ldquo;production&rdquo; in system env-vars</p>
<hr>
<h2 id="failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--">Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?<a hidden class="anchor" aria-hidden="true" href="#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--">#</a></h2>
<p>Read about How Subresource Integrity helps: <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource_Integrity</a></p>
<p>Why was the <code>asset</code> not loading ? : <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#How_browsers_handle_Subresource_Integrity">How_browsers_handle_Subresource_Integrity</a></p>
<p><strong>Solution:</strong></p>
<p>Set the following in <code>config.yml</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">assets</span>:
        <span style="color:#f92672">disableFingerprinting</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>Linked Issues:</p>
<ul>
<li><a href="https://stackoverflow.com/questions/65056585/hugo-theme-not-loading">https://stackoverflow.com/questions/65056585/hugo-theme-not-loading</a></li>
<li><a href="https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource">https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource</a></li>
<li><a href="https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/">https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/</a></li>
</ul>
<hr>
<h2 id="bundling-custom-css-with-themes-assets">Bundling Custom css with theme&rsquo;s assets<a hidden class="anchor" aria-hidden="true" href="#bundling-custom-css-with-themes-assets">#</a></h2>
<ul>
<li>For adding custom css to be bundled inside one minimized css</li>
</ul>
<p>Create folder in yout project directory as</p>
<pre><code>.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
    └── css/
        └── extended/  &lt;---
            ├── custom_css1.css &lt;---
            └── any_name.css   &lt;---
</code></pre><p>All <code>css</code> files inside <code>assets/css/extended</code> will be bundled !</p>
<p><strong>Note</strong>: blank.css is just the placeholder so that it doesn&rsquo;t break the theme when no files are present under <code>assets/css/extended</code></p>
<p>Linked Issues:</p>
<ul>
<li><a href="https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165">Papermod Theme: How to add custom CSS?</a></li>
</ul>
<hr>
<h2 id="custom-head--footer">Custom Head / Footer<a hidden class="anchor" aria-hidden="true" href="#custom-head--footer">#</a></h2>
<p>Custom css/js can be added by way mentioned below.</p>
<pre><code>.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── layouts
    ├── partials
    │   ├── comments.html
    │   ├── extend_footer.html &lt;---
    │   └── extend_head.html   &lt;---
    └── robots.txt
</code></pre><p>Create a html page in directory structure as shown above.</p>
<p>Contents of <code>extend_head.html</code> will be added to <code>head</code> of page.</p>
<p>and contents of <code>extend_footer.html</code> will be added to bottom of page.</p>
<hr>
<h2 id="add-menu-to-site">Add menu to site<a hidden class="anchor" aria-hidden="true" href="#add-menu-to-site">#</a></h2>
<p>You can add menu entries which will appear in the header of every page.</p>
<p>To do so, add a <code>menu</code> section to your site&rsquo;s <code>config.yml</code>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">menu</span>:
    <span style="color:#f92672">main</span>:
        - <span style="color:#f92672">identifier</span>: <span style="color:#ae81ff">categories</span>
          <span style="color:#f92672">name</span>: <span style="color:#ae81ff">categories</span>
          <span style="color:#f92672">url</span>: <span style="color:#ae81ff">/categories/</span>
          <span style="color:#f92672">weight</span>: <span style="color:#ae81ff">10</span>
        - <span style="color:#f92672">identifier</span>: <span style="color:#ae81ff">tags</span>
          <span style="color:#f92672">name</span>: <span style="color:#ae81ff">tags</span>
          <span style="color:#f92672">url</span>: <span style="color:#ae81ff">/tags/</span>
          <span style="color:#f92672">weight</span>: <span style="color:#ae81ff">20</span>
        - <span style="color:#f92672">identifier</span>: <span style="color:#ae81ff">example</span>
          <span style="color:#f92672">name</span>: <span style="color:#ae81ff">example.org</span>
          <span style="color:#f92672">url</span>: <span style="color:#ae81ff">https://example.org</span>
          <span style="color:#f92672">weight</span>: <span style="color:#ae81ff">30</span>
</code></pre></div><p><code>name</code> controls what will be displayed for the menu entry.
<code>url</code> sets the URL that the entry points to.
<code>weight</code> is used to control the positioning of entries.</p>
<p>For more information on menus, see the <a href="https://gohugo.io/content-management/menus/">Hugo wiki page</a>.</p>
<hr>
<h2 id="pin-a-post">Pin a Post<a hidden class="anchor" aria-hidden="true" href="#pin-a-post">#</a></h2>
<p>Post can be pinned/ displayed top on the list by adding a <code>weight=&lt;num&gt;</code> var to page-variables</p>
<p>example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;My Important post&#34;</span>
<span style="color:#f92672">date</span>: <span style="color:#e6db74">2020-09-15T11:30:03</span><span style="color:#ae81ff">+00</span>:<span style="color:#ae81ff">00</span>
<span style="color:#f92672">weight</span>: <span style="color:#ae81ff">1</span>
---

</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;My 2nd Important post&#34;</span>
<span style="color:#f92672">date</span>: <span style="color:#e6db74">2020-09-15T11:30:03</span><span style="color:#ae81ff">+00</span>:<span style="color:#ae81ff">00</span>
<span style="color:#f92672">weight</span>: <span style="color:#ae81ff">2</span>
---

</code></pre></div><hr>
<h2 id="adding-custom-favicons">Adding Custom Favicon(s)<a hidden class="anchor" aria-hidden="true" href="#adding-custom-favicons">#</a></h2>
<p>We support the following paths under <code>/static</code> directory
and can be added accordingly.</p>
<ul>
<li><code>favicon.ico</code></li>
<li><code>favicon-16x16.png</code></li>
<li><code>favicon-32x32.png</code></li>
<li><code>apple-touch-icon.png</code></li>
<li><code>safari-pinned-tab.svg</code></li>
</ul>
<ol>
<li>
<p>Favicon(s) can be generated by <a href="https://favicon.io">Favicon.io</a></p>
<p>and can be simply put in <code>/static</code> folder.</p>
</li>
<li>
<p>Other way is to add favicon(s) NOT located in <code>/static</code> folder.</p>
<p>In site config add the following:</p>
<pre><code>params:
assets:
    favicon: &quot;&lt;link / absolute url&gt;&quot;
    favicon16x16:  &quot;&lt;link / absolute url&gt;&quot;
    favicon32x32:  &quot;&lt;link / absolute url&gt;&quot;
    apple_touch_icon:  &quot;&lt;link / absolute url&gt;&quot;
    safari_pinned_tab:  &quot;&lt;link / absolute url&gt;&quot;
</code></pre><ul>
<li><code>absolute url</code> means direct links to external resource: ex. <a href="https://web.site/someimage.png">https://web.site/someimage.png</a></li>
</ul>
<p>example:</p>
<pre><code>params:
assets:
    favicon: &quot;/favicon.ico&quot;
    favicon16x16:  &quot;/favicon-16x16.png&quot;
    favicon32x32:  &quot;/favicon-32x32.png&quot;
    apple_touch_icon:  &quot;/apple-touch-icon.png&quot;
    safari_pinned_tab:  &quot;/safari-pinned-tab.svg&quot;
</code></pre></li>
</ol>
<hr>
<h2 id="centering-image-in-markdown">Centering image in markdown<a hidden class="anchor" aria-hidden="true" href="#centering-image-in-markdown">#</a></h2>
<p>Add <code>#center</code> after image to center align an image</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-md" data-lang="md">![<span style="color:#f92672">name</span>](<span style="color:#a6e22e">path/to/image.png#center</span>)
</code></pre></div><p><strong>When using <a href="https://gohugo.io/content-management/shortcodes/"><code>figure</code></a> shortcode</strong></p>
<p>use <code>align=center</code> to center image with captions</p>
<p>ex.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-md" data-lang="md">{{&lt; <span style="color:#f92672">figure</span> <span style="color:#a6e22e">align</span><span style="color:#f92672">=</span><span style="color:#e6db74">center</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image.jpg&#34;</span> &gt;}}
</code></pre></div><hr>
<h2 id="using-hugos-syntax-highlighter-chroma">Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;<a hidden class="anchor" aria-hidden="true" href="#using-hugos-syntax-highlighter-chroma">#</a></h2>
<ol>
<li>
<p>Disable Highlight.js in site <code>config.yml</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">assets</span>:
        <span style="color:#f92672">disableHLJS</span>: <span style="color:#66d9ef">true</span>
</code></pre></div></li>
<li>
<p>Set hugo&rsquo;s markdown styling in site <code>config.yml</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">markup</span>:
    <span style="color:#f92672">highlight</span>:
        <span style="color:#75715e"># anchorLineNos: true</span>
        <span style="color:#f92672">codeFences</span>: <span style="color:#66d9ef">true</span>
        <span style="color:#f92672">guessSyntax</span>: <span style="color:#66d9ef">true</span>
        <span style="color:#f92672">lineNos</span>: <span style="color:#66d9ef">true</span>
        <span style="color:#75715e"># noClasses: false</span>
        <span style="color:#f92672">style</span>: <span style="color:#ae81ff">monokai</span>
</code></pre></div></li>
<li>
<p>If you want <code>lineNos: true</code>, the background won&rsquo;t be proper.
This will only work with <code>noClasses: false</code> or <code>pygmentsUseClasses: true</code>.
Read <a href="https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css">Generate Syntax Highlighter CSS</a></p>
<p>Add the following to <code>assets/css/extended/custom.css</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-css" data-lang="css">.<span style="color:#a6e22e">chroma</span> {
    <span style="color:#66d9ef">background-color</span>: <span style="color:#66d9ef">unset</span>;
}
</code></pre></div><p>More Info : <a href="https://gohugo.io/getting-started/configuration-markup#highlight">Configure Markup - Highlight</a></p>
</li>
</ol>
<hr>
<h2 id="search-not-working-">Search not working ?<a hidden class="anchor" aria-hidden="true" href="#search-not-working-">#</a></h2>
<p>If you are using a CDN to server assets from a different domain, search would break</p>
<p>Why? Take a look at <a href="https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35">fastsearch.js#L35</a>.</p>
<p>We fetch the <code>index.json</code> (where the search function looks for the keywords typed) one level up of the website <code>search.min.js</code> is hosted on.</p>
<p>We have used this insted of assigning <code>baseURL</code> so as to work with multilingual websites ex. <code>example.com/fr/</code> and websites being placed under a subdirectory ex. <code>example.com/blog/</code>.</p>
<p>To fix for <em>single</em> language websites hosting assets from CDN, this you may <a href="#override-theme-template">override</a> <a href="https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35">fastsearch.js#L35</a> and placing appropriate URL as in</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">open</span>(<span style="color:#e6db74">&#34;GET&#34;</span>, <span style="color:#e6db74">&#34;https://example.com/index.json&#34;</span>);
</code></pre></div><hr>
<h2 id="references">References<a hidden class="anchor" aria-hidden="true" href="#references">#</a></h2>
<ul>
<li><a href="https://zwbetz.com/override-a-hugo-theme/">Override a Hugo theme</a></li>
</ul>

</div>
  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="http://zouheng22.gitee.io/flippedzh/tags/papermod/">PaperMod</a></li>
    </ul>
<nav class="paginav">
  <a class="prev" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-features/">
    <span class="title">« Prev Page</span>
    <br>
    <span>Features</span>
  </a>
  <a class="next" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-icons/">
    <span class="title">Next Page »</span>
    <br>
    <span>Icons</span>
  </a>
</nav>

<div class="share-buttons">
    <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs on twitter"
        href="https://weibo.com/">
        <svg height="256px" style="enable-background:new 0 0 256 256;" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Background_1_" style="enable-background:new    ;">
        <g id="Background">
            <g>
                <path d="M249.422,30.68c-2.721-4.986-5.816-9.537-9.793-13.521     c-3.992-3.998-8.709-7.587-13.703-10.314c-8.381-4.576-18.788-6.855-29.002-6.855H59.075c-10.444,0-20.542,2.344-29.265,6.948     c-5.022,2.649-9.588,6.146-13.502,10.126c-3.932,3.998-7.491,8.488-10.046,13.572c-4.289,8.533-6.274,18.478-6.274,28.65v137.43     c0,10.326,1.671,20.678,6.296,29.134c2.681,4.9,6.191,9.86,10.087,13.795c3.934,3.97,8.583,7.225,13.503,9.955     c8.465,4.7,18.842,6.413,29.201,6.413h137.849c10.568,0,20.399-1.523,28.982-6.401c4.739-2.692,9.879-6.113,13.687-9.966     c3.923-3.968,7.2-8.851,9.886-13.799c4.566-8.415,6.533-18.874,6.533-29.131V59.285C256.012,48.978,254.031,39.124,249.422,30.68     z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFE591;"/>
            </g>
        </g>
    </g>
        <g id="Shape_4_1_" style="enable-background:new    ;">
            <g id="Shape_4">
                <g>
                <path d="M169.217,151.074c-2.088-20.866-29.861-35.239-62.04-32.095     c-32.171,3.145-56.568,22.611-54.478,43.479c2.09,20.876,29.865,35.248,62.039,32.11     C146.916,191.425,171.303,171.957,169.217,151.074z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;"/>
            </g></g>
        </g><g id="Shape_3_1_" style="enable-background:new    ;">
            <g id="Shape_3"><g><path d="M179.092,125.276c-2.738-0.812-4.615-1.361-3.18-4.917     c3.104-7.715,3.425-14.372,0.059-19.121c-6.311-8.908-23.572-8.427-43.359-0.239c0-0.011-6.212,2.687-4.625-2.184     c3.044-9.67,2.585-17.771-2.151-22.444c-10.736-10.616-39.284,0.399-63.764,24.585c-18.333,18.12-28.979,37.325-28.979,53.928     c0,31.76,41.215,51.07,81.536,51.07c52.858,0,88.019-30.345,88.019-54.443C202.648,136.952,190.239,128.692,179.092,125.276z      M114.738,194.569c-32.174,3.138-59.949-11.234-62.039-32.11c-2.09-20.868,22.307-40.335,54.478-43.479     c32.179-3.145,59.952,11.229,62.04,32.095C171.303,171.957,146.916,191.425,114.738,194.569z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#CD201F;"/></g></g></g><g id="Shape_2_1_" style="enable-background:new    ;"><g id="Shape_2"><g><path d="M117.572,134.441c-15.319-3.905-32.636,3.573-39.29,16.802     c-6.777,13.483-0.225,28.456,15.254,33.354c16.032,5.063,34.93-2.701,41.5-17.255     C141.516,153.107,133.426,138.454,117.572,134.441z M105.874,168.889c-3.115,4.863-9.783,6.996-14.806,4.749     c-4.949-2.204-6.411-7.861-3.296-12.604c3.076-4.729,9.52-6.834,14.505-4.785C107.321,158.354,108.931,163.969,105.874,168.889z      M116.131,155.985c-1.125,1.887-3.615,2.794-5.565,2.007c-1.917-0.772-2.518-2.878-1.429-4.735     c1.122-1.844,3.513-2.744,5.427-1.999C116.508,151.952,117.206,154.086,116.131,155.985z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#232323;"/></g></g></g><g id="Shape_1_1_" style="enable-background:new    ;"><g id="Shape_1"><g><path d="M212.111,67.308c-12.48-14.403-30.891-19.894-47.882-16.133     h-0.007c-3.932,0.876-6.438,4.901-5.598,8.986c0.839,4.089,4.706,6.701,8.639,5.829c12.088-2.672,25.168,1.236,34.043,11.467     c8.863,10.23,11.271,24.185,7.475,36.416l0.002,0.004c-1.236,3.986,0.856,8.247,4.689,9.535c3.817,1.288,7.922-0.891,9.16-4.864     c0-0.008,0-0.022,0.003-0.03C227.965,101.311,224.595,81.696,212.111,67.308z M169.621,77.464     c-3.383,0.751-5.54,4.218-4.815,7.743c0.726,3.51,4.052,5.767,7.429,5.001v0.007c4.048-0.89,8.436,0.409,11.404,3.831     c2.975,3.43,3.773,8.104,2.497,12.203h0.007c-1.061,3.422,0.738,7.103,4.03,8.214c3.292,1.097,6.823-0.773,7.884-4.203     c2.603-8.383,0.977-17.936-5.111-24.95C186.871,78.296,177.901,75.632,169.621,77.464z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#DD880C;"/></g></g></g></svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs on linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-faq%2f&amp;title=FAQs&amp;summary=FAQs&amp;source=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-faq%2f">
    
        <svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128">
          <path
            d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28"
            p-id="2917"></path>
        </svg>

    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs on reddit"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-faq%2f&amp;title=FAQs&amp;summary=FAQs&amp;source=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-faq%2f">
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m437 0h-362c-41.398438 0-75 34.601562-75 76v361c0 41.398438 33.601562 75 75 75h362c41.398438 0 75-33.601562 75-75v-361c0-41.398438-33.601562-76-75-76zm0 0" fill="#25d9f8"/><path d="m512 76v361c0 41.398438-33.601562 75-75 75h-181v-512h181c41.398438 0 75 34.601562 75 76zm0 0" fill="#00c0f1"/><g fill="#ececf1"><path d="m121 196h60v211h-60zm0 0"/><path d="m121 106h60v60h-60zm0 0"/><path d="m391 275.800781v131.199219h-60v-121c0-16.5-13.5-30-30-30s-30 13.5-30 30v121h-60v-211h60v11.398438c15.601562-5.097657 25.800781-11.398438 45-11.398438 40.800781 0 75 36.597656 75 79.800781zm0 0"/></g><path d="m391 275.800781v131.199219h-60v-121c0-16.5-13.5-30-30-30s-30 13.5-30 30v121h-15v-211h15v11.398438c15.601562-5.097657 25.800781-11.398438 45-11.398438 40.800781 0 75 36.597656 75 79.800781zm0 0" fill="#e2e2e7"/></svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs on facebook"
        href="https://facebook.com/sharer/sharer.php?u=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-faq%2f">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs on whatsapp"
        href="https://weixin.qq.com/">
        <svg height="512pt" viewBox="0 -45 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m138.667969 96h-21.335938v21.332031h21.335938zm0 0"/><path d="m245.332031 96h-21.332031v21.332031h21.332031zm0 0"/><path d="m320 224h-21.332031v21.332031h21.332031zm0 0"/><path d="m426.667969 224h-21.335938v21.332031h21.335938zm0 0"/><path d="m469.332031 422.535156-65.730469-32.800781c-13.398437 3.269531-27.140624 4.925781-40.933593 4.933594-82.402344 0-149.335938-57.46875-149.335938-128 0-70.535157 66.933594-128 149.335938-128 82.398437 0 149.332031 57.464843 149.332031 128 0 33.867187-15.066406 65.464843-42.667969 89.464843zm-63.332031-55.46875 42 21.066406v-42l4-3.199218c24.933594-20.265625 38.667969-47.332032 38.667969-76.265625 0-58.800781-57.46875-106.667969-128-106.667969-70.535157 0-128 47.867188-128 106.667969 0 58.796875 57.464843 106.664062 128 106.664062 13.324219.019531 26.597656-1.730469 39.464843-5.199219zm0 0"/><path d="m64 326.535156v-63.335937c-40.800781-28.53125-64-69.734375-64-113.867188 0-82.398437 81.332031-149.332031 181.332031-149.332031s181.335938 66.933594 181.335938 149.332031l-21.335938.402344v-.402344c0-70.53125-71.730469-128-160-128-88.265625 0-160 57.46875-160 128 0 38.535157 21.601563 74.667969 59.203125 99.203125l4.796875 3.199219v40.398437l43.601563-21.734374 3.867187.933593c29.613281 7.433594 60.539063 7.980469 90.398438 1.601563l4.535156 20.800781c-31.761719 6.785156-64.625 6.511719-96.269531-.800781zm0 0"/></svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs on telegram"
        href="https://telegram.me/share/url?text=FAQs&amp;url=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-faq%2f">
        <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28">
            <path
                d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
        </svg>
    </a>
</div>

  </footer>
</article>
    </main>
    <footer class="footer">
    <span>&copy; 2021 <a href="http://zouheng22.gitee.io/flippedzh">flipped</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)">
    <button class="top-link" id="top-link" type="button" accesskey="g">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
            <path d="M12 6H0l6-6z" />
        </svg>
    </button>
</a>

<script>
    let menu = document.getElementById('menu')
    menu.scrollLeft = localStorage.getItem("menu-scroll-position");
    menu.onscroll = function () {
        localStorage.setItem("menu-scroll-position", menu.scrollLeft);
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerText = 'copy';

        function copyingDone() {
            copybutton.innerText = 'copied!';
            setTimeout(() => {
                copybutton.innerText = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
